<template>
	<view style="background-color: #fff;">
		<tui-navigation-bar :isFixed="true" :isOpacity="false" splitLine :zIndex="99999" :scrollTop="0" title=""
			backgroundColor="#fff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view class="bar-box">
					<image class="bar-icon" src="../../cutout/容器xj@1x.png" @click='handleCommit' />
					<!-- src="https://static.wddzq.com/static/V3/xiangji.png" -->
					<text class="bar-title">发布动态</text>
				</view>
			</view>
		</tui-navigation-bar>
		<view :style="{height: headerHeight + 'px'}"></view>
		<!-- <view class="message-box" :class="unReadCount > 0 ? 'active': ''">
			<image src="https://static.wddzq.com/static/V3/xiaoxi.png"
				style="width: 48rpx;height: 48rpx;margin-top: 8rpx;" @click='handleMessage' />
		</view> -->
		<view class="fab" :class="unReadCount > 0 ? 'active': ''">
			<image src="../../cutout/邮箱@1x.png" style="width: 50rpx;height: 50rpx;" @click='handleMessage'></image>
		</view>
		<view class="city-list">
			<view class="left">
				<view class="city-list-label" :class="clickA === true ? 'active': ''"
					@click="clickA = true; clickB = false;">关注</view>
				<view class="city-list-label" :class="clickB === true ? 'active': ''"
					@click="clickB = true; clickA = false;">同城</view>
			</view>
			<view class="right">
				<view class="city-list-label" :class="clickC === true ? 'active': ''" @click="handleMessage">聊天</view>
				<view class="map-select" @click="openCity">
					<text class="tui-bold">静安区</text>
					<image class="tui-icon" src="https://static.wddzq.com/static/xiala_select.png"></image>
				</view>
			</view>
			<!-- 		
				<view :class="item.key === selectedKey ? 'active': ''" v-for="item in tabsData" :key="item.key"
					@click="handleTabClick(item)">
					<text style="z-index: 100;position: relative;">{{item.codeName}}</text>
				</view>
				<view v-if="selectedKey === '2'" style="font-size: 24rpx;color: #FFB803;margin-left: 10rpx;"
					@click="openCity">切换城市</view> 
			-->
		</view>
		<!-- 
		<view class="empty" v-if="dynamicsList.length === 0">
			<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
			<view class="empty-text">暂无动态～</view>
		</view> 
		-->
		<view class="events">
			<view class="events-item" v-for="(item, index) in 3" :key="index">
				<view class="events-header">
					<image class="events-header-image" src="../../cutout/圆形 5@1x.png"></image>
					<text class="events-header-title">冬恋悸x</text>
					<text class="events-header-date">刚刚 山东</text>
				</view>
				<view class="events-content">
					<view class="events-content-title">浙江杭州亚运会距离开始倒计时：108天</view>
					<view class="events-content-cont">行速习那阶反等张局四改日感平二达亲阶花消被易
						须相子度证着代效满保史育力地作过海任...</view>
					<view class="events-content-image-list">
						<image class="events-content-image" src="../../cutout/矩形 35@1x.png"></image>
						<image class="events-content-image" src="../../cutout/矩形 35@1x.png"></image>
						<image class="events-content-image" src="../../cutout/矩形 35@1x.png"></image>
					</view>
					<view class="events-content-tip-list">
						<view class="events-content-tips">#新世纪</view>
						<view class="events-content-tips">#新世纪</view>
						<view class="events-content-tips">#新世纪</view>
					</view>
				</view>
				<view class="event-footer">
					<view class="event-footer-left">
						<image src="../../cutout/fx@1x.png" style="width: 36rpx;height: 32rpx;"></image>
						<text style="margin-left: 10rpx;">分享</text>
					</view>
					<view class="event-footer-right">
						<image src="../../cutout/爱心@1x.png" style="width: 33rpx;height: 27rpx;"></image>
						<text style="margin-left: 10rpx;margin-right: 20rpx;">收藏</text>
						<image src="../../cutout/评论@1x.png" style="width: 36rpx;height: 36rpx;"></image>
						<text style="margin-left: 10rpx;">评论</text>
					</view>
				</view>
			</view>
		</view>
		<view class="community">
			<view class="community-item" v-for="(item, index) in dynamicsList" :key="item.id">
				<view class="community-header" @click="handleUserClick(item.userId)">
					<view style="position: relative;width: 74rpx;height: 80rpx;display: flex;justify-content: center;">
						<image class="community-img" style="margin-top: 6rpx;" mode="aspectFill"
							:src="item.userHeadPic" />
						<image v-if="item.vipOrNot" style="position: absolute;top:0;left: 0;width: 74rpx;height: 80rpx;"
							src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
					</view>
					<view class="community-info">
						<view class="community-name">
							<view :class="item.vipOrNot ? 'vip' : ''">{{item.userNickName}}</view>
							<image v-if="item.vipOrNot" class="community-tag"
								src="https://static.wddzq.com/static/V3/aiwanxiaofendui.png" />
						</view>
						<view class="community-time">{{item.createDate}}</view>
					</view>
				</view>
				<!-- <view class="community-title">浙江杭州亚运会距离开始倒计时：108天</view> -->
				<view class="community-content" @click="handleDetail(item.id)">{{item.content}}</view>
				<view class="community-img-box" @click="handleDetail(item.id)">
					<image mode="aspectFill" v-for="(it, index) in (item.picListV2?.split('|') || [])" :key="index"
						:src="it" :class="[0,3,6].includes(index) ? '' : 'ml-8'"
						:style="{width: imageWidth + 'rpx', height: imageWidth + 'rpx'}"
						@tap.native.stop="handleImagePreview(item.picListV2, index)" />
				</view>
				<view class="tag-list">
					<view class="tag-item" v-for="(it, index) in (item.tagVoList || [])" :key="index">#{{it.tagName}}
					</view>
				</view>
				<view class="commit-cell">
					<view class="commit-data">{{item.lookCount}}人浏览</view>
					<view class="commit-opts">
						<view class="commit-opts-item">
							<image v-if="item.didiOrNot" src="https://static.wddzq.com/static/V3/DD-xuanzhong.png">
							</image>&nbsp;
							<image v-else @click="fetchCommitUserDiDi(item.userId, index)"
								src="https://static.wddzq.com/static/V3/DD-weixuanzhong.png"></image>&nbsp;
							<text>DD</text>
						</view>
						<view class="commit-opts-item" @click="fetchCommitDynamicGood(item.id, index)">
							<image v-if="item.goodOrNot" src="https://static.wddzq.com/static/V3/dianzan-xuanzhong.png">
							</image>&nbsp;
							<image v-else src="https://static.wddzq.com/static/V3/dianzan-weixuanzhong.png"></image>
							&nbsp;
							<text>{{item.goodCount}}</text>
						</view>
						<view class="commit-opts-item">
							<image src="https://static.wddzq.com/static/V3/pinglun.png"></image>&nbsp;
							<text>{{item.commentCount}}</text>
						</view>
						<view v-if="item.myself" class="commit-opts-item" @click="handleDelete(item.id, index)">
							<image src="https://static.wddzq.com/static/V3/delete-outlined.png"></image>
						</view>
					</view>
				</view>
				<input :focus="focusDynamicId === item.id ? focus : false" type="text" confirm-type="评论"
					:auto-blur="false" :data-id="item.id" :confirm-hold="true"
					:value="focusDynamicId === item.id ? inputText : ''" @input="handleInput" @blur="handleBlur"
					@confirm="handleConfirm(item.id)"
					:placeholder="replyComment ?  '@' + replyComment.commentUserNickName : '点击评价'"
					style="font-size: 26rpx;color: #999999;border-radius: 18rpx;height: 80rpx;padding: 0 24rpx;background-color: #eee;"
					placeholder-style="font-size: 26rpx;color: #999999;font-weight: 400;" />
				<view class="comment-list" v-if="item.commentVoList?.length > 0">
					<view class="comment-item" v-for="it in item.commentVoList">
						<text class="comment-item-name"
							@click="handleCommentClick(it, item.id)">{{it.commentUserNickName}}{{it.replyUserNickName ? ` 回复 ${it.replyUserNickName}` : ''}}:
						</text>
						<text class="comment-item-text"
							@click="handleCommentClick(it, item.id)">{{it.commentContent}}</text>
						<image v-if="it.myself" src="https://static.wddzq.com/static/V3/delete-outlined.png"
							style="width: 36rpx;height: 36rpx;" @click="handleDeleteCommit(it.id, item.id)" />
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 城市弹窗 -->
	<u-popup :show="showCity" closeOnClickOverlay
		:customStyle="{ height: ((systemInfo?.screenHeight || 300) - 200) + 'px' }" mode="bottom" :round="18"
		@close="closeCity" @open="openCity" :zIndex="1000000">
		<view style="border-top-left-radius: 18rpx;border-top-right-radius: 18rpx;overflow: hidden;">
			<view style="height: 40px;display: flex;align-items: center;justify-content: center;">
				<text style="font-size: 28rpx;color: #333;">选择城市</text>
			</view>
			<view class="u-index-list" style="padding: 0 112rpx 0 24rpx;position: relative;">
				<view
					style="position: absolute;right: 18rpx;top: 20rpx;z-index: 500;padding: 10rpx 0;background-color: #f2f2f2;width: 34rpx;border-radius: 17rpx;">
					<view style="font-size: 20rpx;color: #333;text-align: center;margin-bottom: 10rpx;"
						v-for="item in cityList">{{item.letter}}</view>
				</view>
				<view style="height: 80rpx;background-color: #f2f2f2;border-radius: 20px;padding: 0 30rpx;">
					<u--input border="none" customStyle="height: 80rpx;" fontSize="24" placeholder="搜索城市"
						:value="searchValue" @input="handleSearchCityChange"></u--input>
				</view>
				<scroll-view :offset-accuracy="1" :style="{
						height: ((systemInfo?.screenHeight || 300) - 200) + 'px'
					}" scroll-y @scroll="scrollHandler" ref="uList">
					<template>
						<view v-for="(item, index) in cityListSearch" :key="index">
							<view
								style="font-weight: bold;font-size: 28rpx;color: #333;padding: 24rpx 0;border-bottom: 1rpx solid #DDDDDD;">
								{{ item.letter }}
							</view>
							<!-- <u-index-anchor :text="cityList[index]" :height="80" bgColor="#fff" size="36"></u-index-anchor> -->
							<view class="list-cell" v-for="(cell, i) in item.data" :data-item="cell"
								@click="handleCitySelect">
								{{cell.cityName || '-'}}
							</view>
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
	</u-popup>
	<tui-ctabbar :current="3" :refresh="refresh"></tui-ctabbar>
</template>

<script>
	import {
		getDynamicsPage,
		getMessageUnReadCount,
		getCityViewVoList,
		getUserRecDynamicsPage,
		deleteDynamic,
		deleteDynamicComment,
		commitDynamicComment,
		getDynamicsDetail,
		commitUserDiDi,
		commitDynamicGood,
		getTableData
	} from '../../config/api.js';
	import {
		to,
		uploadAfter,
		getSystemInfo,
		pxToRpx
	} from '../../config/utils.js';
	import {
		mapJson
	} from '../../config/common.js';
	import JsonData from '../../config/area_format_object.json'
	export default {
		data() {
			return {
				unReadCount: 0,
				refresh: 0,
				filterData: {
					pages: 1,
					size: 20,
				},
				loading: false,
				hasMore: true,
				dynamicsList: [],
				// 当前聚焦的输入框所在动态的id
				focusDynamicId: '',
				// 当前回复的某条评论
				replyComment: '',
				// 当前输入框文本
				inputText: '',
				focus: false,

				headerHeight: 84,
				imageWidth: 80,
				selectedKey: '2',
				tabsDataOrigin: [{
					key: '1',
					codeCity: '',
					codeName: '推荐'
				}],
				tabsData: [{
					key: '1',
					codeCity: '',
					codeName: '推荐'
				}],
				showCity: false,
				systemInfo: '',

				// 城市数据
				cityList: [],
				cityListSearch: [],
				searchValue: '',
				clickC: false,
				clickB: false,
				clickA: false,
			}
		},
		onReachBottom() {
			if (this.loading || !this.hasMore) return;
			this.filterData = {
				...this.filterData,
				pages: this.filterData.pages + 1
			};
			this.fetchDynamicsPage(this.filterData)
		},
		onPullDownRefresh() {
			this.resetDynamics();
		},
		onShow() {
			console.log("1211314" + mapJson);
			fetch('../../config/area_format_object.json') // 假设你的JSON文件名为data.json


				.then(response => response.json())


				.then(json => {


					this.data = json;
					console.log(this.data);

				});
			console.log(1234567890)
			this.refresh = Math.random();
			this.focus = false;

			let system = getSystemInfo();
			if (system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);

				let screenWidth = pxToRpx(system.screenWidth || 320);
				this.imageWidth = Math.floor((screenWidth - 100 - 16) / 3);
			}
			this.fetchMessageUnReadCount();

			// 如果是发布动态回来的
			if (uni.getStorageSync('__commit_success')) {
				this.resetDynamics();
				uni.removeStorageSync('__commit_success');
			}
		},
		onReady() {
			getTableData().then((res) => {
				console.log(res.data);
			})
			const commentCity = uni.getStorageSync('__local_comment__city');
			const globalCity = uni.getStorageSync('__local__city');
			let city = mapJson;
			if (city) {
				let _city = city.split(',');
				this.tabsData = this.tabsDataOrigin.concat({
					key: '2',
					codeCity: _city[0],
					codeName: _city[1]
				})
				if (!commentCity) {
					uni.setStorageSync('__local_comment__city', globalCity);
				}

			}

			this.resetDynamics();
			this.systemInfo = getSystemInfo();
			this.fetchCityViewVoList();
		},
		methods: {
			closeCity() {
				this.showCity = false;
			},
			openCity() {
				this.showCity = true;
			},
			async fetchMessageUnReadCount() {
				const [err, data] = await to(getMessageUnReadCount())
				if (err) return;
				this.unReadCount = data?.data || 0;
			},
			handleSearchCityChange(value) {
				this.searchValue = value;
				let cityListSearch = this.cityList.map(item => {
					let {
						data,
						letter
					} = item;
					let _data = (data || []).filter(it => it.cityName.indexOf(this.searchValue) > -1) || [];

					return {
						letter,
						data: _data
					};
				})
				this.cityListSearch = cityListSearch.filter(item => item.data.length > 0);
			},

			async fetchCityViewVoList() {
				const [err, cityData] = await to(getCityViewVoList());
				if (err) return;
				let cityList = [];
				(cityData?.data || []).forEach(city => {
					let data = city.cityVoList ||
				[]; //?.map(item => ({ id: item.cityCode, name: item.cityName })) || []
					cityList.push({
						letter: city.cityFirstLetter || '-',
						data: data
					})
				})
				this.cityList = cityList;
				this.cityListSearch = cityList;
			},
			handleCitySelect(e) {
				const {
					cityCode,
					cityName
				} = e.currentTarget?.dataset?.item || {};
				this.filterData = {
					...this.filterData,
					cityCode,
					cityName,
				};
				this.showCity = false;
				this.tabsData = this.tabsDataOrigin.concat({
					key: '2',
					codeCity: cityCode,
					codeName: cityName
				})
				this.resetDynamics();
			},
			handleImagePreview(urls, index) {
				uni.previewImage({
					current: index,
					urls: urls.split('|')
				})
			},
			handleTabClick(data) {
				this.selectedKey = data.index;
				// this.selectedKey = data.key;
				this.resetDynamics();
			},
			// 删除动态
			async handleDelete(dynamicId, index) {
				let isDel = await this.showModal();
				if (!isDel) return;

				const [err, data] = await to(deleteDynamic({
					dynamicId
				}))
				if (err) {
					return uni.showToast({
						title: err?.msg || '删除动态成功',
						icon: 'none'
					})
				}
				let _dynamicsList = [...this.dynamicsList];
				_dynamicsList.splice(index, 1);
				this.dynamicsList = _dynamicsList;
			},
			async handleDeleteCommit(commentId, dynamicId) {
				let isDel = await this.showModal();
				if (!isDel) return;

				const [err, data] = await to(deleteDynamicComment({
					commentId
				}))
				if (err) {
					return uni.showToast({
						title: err?.msg || '删除评论成功',
						icon: 'none'
					})
				}
				this.fetDynamicsDetail(dynamicId);
			},
			showModal() {
				return new Promise(resolve => {
					uni.showModal({
						title: '确认删除？',
						success: function(res) {
							if (res.confirm) {
								resolve(true);
							} else if (res.cancel) {
								resolve(false);
							}
						}
					});
				})
			},
			handleUserClick(userId) {
				uni.navigateTo({
					url: '/pages/personal/personal?userId=' + userId
				})
			},
			handleDetail(id) {
				uni.navigateTo({
					url: '/pages/commit-detail/commit-detail?id=' + id
				})
			},
			handleCommentClick(replyComment, dynamicId) {
				if (replyComment) {
					this.focus = true;

					setTimeout(() => {
						this.replyComment = replyComment;
						this.focusDynamicId = dynamicId;
					}, 300)
				}
			},
			// 评论
			async handleConfirm(dynamicId) {
				if (!this.inputText) {
					return uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
				}

				let params = {
					dynamicId,
					replyCommentId: this.replyComment?.id,
					commentContent: this.inputText
				};
				const [err, data] = await to(commitDynamicComment(params));

				if (err) {
					return uni.showToast({
						title: err?.msg || '评论失败',
						icon: 'none'
					})
				}

				this.inputText = '';
				this.focusDynamicId = '';
				this.replyComment = '';
				this.focus = false;
				this.fetDynamicsDetail(dynamicId);
				uni.showToast({
					title: '评论成功',
					icon: 'none'
				})
			},
			handleInput(e) {
				this.focusDynamicId = e.currentTarget.dataset.id;
				this.inputText = e.detail.value;
			},
			handleBlur() {
				this.focusDynamicId = '';
				this.inputText = '';
				this.replyComment = '';
				this.focus = false;
			},
			// 获取评论详情
			async fetDynamicsDetail(id) {
				let params = {
					dynamicId: id,
				};
				const [err, data] = await to(getDynamicsDetail(params));

				if (err) return;
				if (data?.data?.commentVoList) {
					let _dynamicsList = [...this.dynamicsList];
					_dynamicsList.forEach(item => {
						if (item.id === id) {
							item.commentVoList = data?.data?.commentVoList;
						}
					})
				}
			},
			// 重新请求接口
			resetDynamics() {
				let params = {
					...this.filterData,
					pages: 1,
				};
				this.loading = false;
				this.hasMore = true;
				this.fetchDynamicsPage(params, true);
			},
			async fetchDynamicsPage(params, isClear) {
				this.loading = true;
				params.current = params.pages;
				params.cityCode = this.tabsData.find(item => item.key === this.selectedKey)?.codeCity;
				const server = this.selectedKey === '1' ? getUserRecDynamicsPage : getDynamicsPage
				const [err, dynamicsList] = await to(server(params));
				this.loading = false;
				uni.stopPullDownRefresh();
				if (err) return;
				let records = dynamicsList?.data?.records || [];

				if (records.length < this.filterData.size) {
					this.hasMore = false;
				}
				this.dynamicsList = isClear ? records : this.dynamicsList.concat(records);
			},
			//点赞
			async fetchCommitDynamicGood(id, index) {
				let params = {
					dynamicId: id
				};

				const [err, data] = await to(commitDynamicGood(params));

				if (err) {
					return uni.showToast({
						title: err?.msg || '操作失败',
						icon: 'none'
					})
				};
				// uni.showToast({
				// 	title: 'DIDI发送成功',
				// 	icon: 'none'
				// })
				const _dynamicsList = [...this.dynamicsList];
				if (_dynamicsList[index].goodOrNot) {
					_dynamicsList[index].goodCount = (_dynamicsList[index].goodCount || 0) - 1;
				} else {
					_dynamicsList[index].goodCount = (_dynamicsList[index].goodCount || 0) + 1;
				}
				_dynamicsList[index].goodOrNot = !_dynamicsList[index].goodOrNot;
				this._dynamicsList = _dynamicsList;

			},
			// 发送DIDI
			async fetchCommitUserDiDi(userId, index) {
				let params = {
					userId: userId
				};

				const [err, data] = await to(commitUserDiDi(params));

				if (err) {
					return uni.showToast({
						title: err?.msg || '操作失败'
					})
				};
				uni.showToast({
					title: data?.data || '发送成功',
					icon: 'none'
				})
				// _dynamicsList[index].goodOrNot = !_dynamicsList[index].goodOrNot;
			},
			handleMessage() {
				uni.navigateTo({
					url: '/pages/message/message'
				})
			},
			handleCommit() {
				uni.navigateTo({
					url: '/pages/commit/commit'
				})
			}
		}
	}
</script>

<style>
	.bar-box {
		margin: 8rpx 0 8rpx 20rpx;
		width: 108px;
		height: 36px;
		border-radius: 18px;
		background: #EFFBFD;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bar-icon {
		width: 22px;
		height: 22px;
	}

	.bar-title {
		margin-left: 6rpx;
		width: 60px;
		height: 22px;
		color: #64D2D8;
		font-size: 15px;
		font-weight: 500;
	}

	.message-box {
		position: relative;
	}

	.message-box.active::after {
		position: absolute;
		content: ' ';
		top: 0;
		right: 0;
		width: 16rpx;
		height: 16rpx;
		background: #F93A4A;
		border-radius: 8rpx;
	}

	.city-list {
		position: relative;
		background-color: #fff;
		width: 100%;
		height: 110rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.left {
		display: flex;
		justify-content: center;
	}

	.right {
		display: flex;
		justify-content: center;
	}

	.city-list-label {
		position: relative;
		font-size: 30rpx;
		font-weight: 500;
		color: #666363;
		width: 60rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin-right: 30rpx;
		z-index: 99;
	}

	.city-list-label.active {
		width: 72rpx;
		height: 52rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #3D3D3D;
		line-height: 52rpx;
		position: relative;
	}

	.city-list-label.active::before {
		position: absolute;
		content: ' ';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 12rpx;
		background: #64D2D8;
	}

	.map-select {
		width: 148rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		background: #F5F5F5;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-bold {
		color: #666363;
		font-size: 26rpx;
		font-weight: 500;
		height: 52rpx;
		line-height: 52rpx;
	}

	.tui-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.events {
		padding: 0 30rpx 0 16rpx;
		background-color: #FFFFFF;
	}

	.events-item {
		position: relative;
		background: #FFFFFF;
		margin: 22rpx 0;
	}

	.events-header {
		position: relative;
		display: flex;
		align-items: center;
	}

	.events-header-image {
		margin-top: 8rpx;
		width: 32px;
		height: 32px;
	}

	.events-header-title {
		width: 53px;
		height: 21px;
		font-size: 15px;
		line-height: 21px;
		color: #505050;
		margin-left: 10rpx;
	}

	.events-header-date {
		position: absolute;
		right: 15px;
		margin-top: 3px;
		width: 48px;
		height: 15px;
		font-size: 11px;
		line-height: 15px;
		color: #AAA9AA;
	}

	.events-content {
		position: relative;
	}

	.events-content-title {
		margin: 0 0 6rpx 96rpx;
		width: 247px;
		height: 20px;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		color: #141414;
	}

	.events-content-cont {
		width: 308px;
		height: 40px;
		font-size: 14px;
		color: #6A6A6A;
		margin-left: 94rpx;
	}

	.events-content-image-list {
		display: flex;
		margin: 24rpx 0 24rpx 92rpx;
	}

	.events-content-image {
		width: 81px;
		height: 82px;
		border-radius: 8px;
		margin-right: 16rpx;
	}

	.events-content-tip-list {
		display: flex;
		align-items: center;
		margin: 0 0 24rpx 96rpx;
	}

	.events-content-tips {
		width: 67px;
		height: 25px;
		border-radius: 18px;
		background: #EFFBFD;
		color: #64D2D8;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.event-footer {
		color: #AAA9AA;
		font-size: 14px;
		position: relative;
		margin: 0 30rpx 0 96rpx;
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
	}

	.event-footer-left {
		display: flex;
	}

	.event-footer-right {
		display: flex;
	}

	.fab {
		position: fixed;
		bottom: 200rpx;
		right: 26rpx;
		width: 98rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 5px 0px rgba(184, 184, 184, 0.3);
		border-radius: 50%;
		color: #000;
		cursor: pointer;
		z-index: 10000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.community {
		padding: 0 24rpx;
	}

	.community-item {
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 32rpx 26rpx;
		margin-bottom: 24rpx;
	}

	.community-item .community-header {
		display: flex;
		align-items: center;
	}

	.community-header .community-img {
		width: 66rpx;
		height: 66rpx;
		border-radius: 40rpx;
	}

	.community-header .community-info {
		margin-left: 10rpx;
	}

	.community-info .community-name {
		display: flex;
		height: 42rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}

	.community-info .community-name view {
		margin-right: 8rpx;
	}

	.community-info .community-name view.vip {
		color: #FF6F0A;
	}

	.community-info .community-name .community-tag {
		width: 143rpx;
		height: 44rpx;
	}

	.community-info .community-time {
		height: 30rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		line-height: 30rpx;
	}

	.community-title {
		height: 36rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		margin-top: 16rpx;
		margin-bottom: 8rpx;

	}

	.community-content {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		margin-bottom: 16rpx;
		margin-top: 20rpx;
	}

	.community-img-box {
		display: flex;
		flex-wrap: wrap;
	}

	.community-img-box image {
		height: 210rpx;
		border-radius: 18rpx;
		margin-bottom: 8rpx;
	}

	.ml-8 {
		margin-left: 8rpx;
	}

	.tag-list {
		margin: 24rpx 0;
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		height: 48rpx;
		background: #F7F7F7;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		margin-bottom: 10rpx;

		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding: 0 16rpx;
	}

	.commit-cell {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.commit-cell .commit-data {
		height: 34rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
	}

	.commit-cell .commit-opts {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.commit-opts .commit-opts-item {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}

	.commit-opts-item image {
		width: 32rpx;
		height: 32rpx;
	}

	.commit-opts-item text {
		height: 36rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 36rpx;
	}

	.comment-list {
		background-color: #f2f2f2;
		border-radius: 18rpx;
		padding: 20rpx;
		margin-top: 25rpx;
	}

	.comment-list .comment-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.comment-item .comment-item-name {
		font-size: 28rpx;
		color: #999;
	}

	.comment-item .comment-item-text {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		padding: 0 12rpx;
	}

	/* 城市列表 */
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	/* 城市列表 */
</style>